<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<script type="text/javascript">
$(function(){
	$('#ddl2page_ddl').val($('#ddl4page').val());
	
	$('#ddl2page_form').children().find('select').each(function(){
		//debugger;
		var value = $(this).val();
		var node = $(this).parent().next();
		var name = $(this).attr('name').split('.')[0];
		//console.log(name);
		$('#ddl2page_controlbox').children().each(function(){
			//debugger;
			if($(this).attr('category') == value){
				var e = $(this).clone();
				//e.name = name;
				//console.log(e);
				node.append(e);
				e.children().each(function(){
					//console.log(name + $(this).attr('name'));
					$(this).attr('name', name + $(this).attr('name')); 
				});
			}
		});
	});
});

function ddl2PageColumnClick(column){
	var thisId = '#' + column + '_page';
	
	$('#ddl2page_form').children().find('input[name^="' + column + '."]').each(function(){
		var indicator = $(this).attr('name').split('.')[1];
		if(_.contains(['query'], indicator)){
			if($(thisId).is(':checked')){
				$(this).removeAttr('disabled');
			}else{
				$(this).attr('disabled', 'disabled');
			}
		}
	});
}

function ddl2PageFormat(ref){
	var checked = false;
	
	$('#ddl2page_form').children().find('input[name$="port"]').each(function(){
		checked = checked || $(this).is(':checked');
	});
	//debugger
	$('#ddl2page_form').children().find('input[name="format"]').each(function(){
		if(checked){
			$(this).removeAttr('disabled');
		}else{
			$(this).attr('disabled', 'disabled');
		}
	});
}

function ddl2PageEditable(column, index, editable){
	$('#ddl2page_input_control' + index).children().find('input').each(function(){
		if(editable){
			$(this).removeAttr('disabled');
		}else{
			$(this).attr('disabled', 'disabled');
		}
	});
	
	$('#ddl2page_form').children().find('input').each(function(){
		if(editable){
			$('#' + column + index + '_required').removeAttr('disabled');
		}else{
			$('#' + column + index + '_required').prop('checked', false);
			$('#' + column + index + '_required').attr('disabled', 'disabled');
		}
	});
}

function ddl2PageCategoryParam(column, value, index){
	var targetId = '#ddl2page_input_control' + index;
	$(targetId).empty();
	
	$('#ddl2page_controlbox').children().each(function(){
		var category = $(this).attr('category');
		
		if(value == category){
			var e = $(this).clone();
			$(targetId).append(e);
			e.children().each(function(){
				$(this).attr('name', column + $(this).attr('name'));
			});
		}
		
		if(_.contains(['Timestamp', 'Editor', 'CTimestamp', 'Creator'], value)){
			$('#' + column + index + '_editable1').attr('disabled', 'disabled');
			$('#' + column + index + '_editable2').prop('checked', true);
			$('#' + column + index + '_required').prop('checked', false);
			$('#' + column + index + '_required').attr('disabled', 'disabled');
		}else{
			$('#' + column + index + '_editable1').prop('checked', true);
			$('#' + column + index + '_editable1').removeAttr('disabled');
			$('#' + column + index + '_required').removeAttr('disabled');
		}
	});
}

function ddl2PageDomainInput(){
	var module = $('#ddl2page_form').children().find('input[name="module"]');
	var overrided = $('#ddl2page_form').children().find('input[name="overrided"]');
	
	if(overrided.is(':checked')){
		module.removeAttr('disabled');
	}else{
		module.attr('disabled', 'disabled');
	}
}

function getDDL2PageVersion(ref){
	var id = ref.options[ref.selectedIndex].value;
	
	if(id){
		$.ajax({
			type: 'get',
			dataType: 'json',
			url: 'code/snapshot.json?id=' + id,
			success: function(data){
				if(data && data.code == 0){
					$('#ddl2page_pane').html(data.html);
				}else if(data){
					handleError(data.code);
				}
			},
			error: function(data){
				//handleError(data.code);
			}
		});
	}
}
</script>

<h2>步骤2：管理画面配置</h2>
<ul>
<li><strong>检索</strong>&nbsp;表示管理画面上点击查询按钮时作为关键字查询的条件</li>
<li><strong>显示名称</strong>&nbsp;表示管理画面上列标题的名字</li>
<li><strong>必填</strong>&nbsp;表示更新字段时必须输入的项目</li>
<li><strong>检索结果排序</strong>&nbsp;表示对检索结果排序字段的顺序</li>
<li><strong>值列表</strong>&nbsp;表示编辑时用option box列出的可选值，以空格分隔的字符串，格式为 <i>数据库值:显示文本</i> <!-- 或 <i>显示文本</i>，如果不写数据库值部分，显示的文本会被存储到数据库中，第一项默认选中 --></li>
<li>表字段不能使用这些关键字：<strong>PAGE,ROWS,ORDERBY</strong></li>
<li><strong>时间戳</strong>&nbsp;表示更新数据时，时间会自动变化</li>
</ul>

选择历史版本
<select onchange="getDDL2PageVersion(this)">
	<option value="">--无--</option>
<c:forEach items="${histories}" var="history">
	<option value="${history.id}">${history.author}:${history.time}</option>
</c:forEach>
</select>

<input id="ddl2page_table" type="hidden" value="${tableName}"/>

<div id="ddl2page_pane">
<form id="ddl2page_form">
<table class="tstyle tborder">
	<colgroup>
		<col width="13%"/>
		<col width="3%"/>
		<col width="3%"/>
		<col width="3%"/>
		<col width="11%"/>
		<col width="15%"/>
		<col width="7%"/>
		<col width="13%"/>
		<col width="8%"/>
	</colgroup>
	<tr>
		<th class="tborder center">可见</th>
		<th class="tborder center">类型</th>
		<th class="tborder center">检索</th>
		<th class="tborder center">必填</th>
		<th class="tborder center">显示名称</th>
		<th colspan="2" class="tborder center">检索结果排序</th>
		<th colspan="3" class="tborder center">编辑选项</th>
	</tr>
<c:forEach items="${columns}" var="column" varStatus="status">	
	<tr>
		<th class="tborder left">
			<label><input id="${column.name}_page" type="checkbox" name="${column.name}_page" checked onclick="ddl2PageColumnClick('${column.name}')"/>${column.name}</label>
			<input type="hidden" name="${column.name}_name" value="${column.name}">
		</th>
		<td class="tborder center">${column.utype}</td>
		<td class="tborder center">
<%-- <c:if test="${!column.id}"> --%>
			<input id="${column.name}_query" type="checkbox" name="${column.name}.query" value="true" />
<%-- </c:if> --%>		
		</td>
		<td class="tborder center">
<%-- <c:if test="${!column.id}"> --%>
			<input type="checkbox" id="${column.name}${status.index}_required" name="${column.name}.required" value="true" />
<%-- </c:if> --%>			
		</td>
		<td class="tborder center">
			<input style="width:100px" type="text" name="${column.name}.text" value="${column.comment}"/>
		</td>
		<td class="tborder center">
			<label><input type="radio" name="${column.name}.order" value="" checked onclick="$('#${column.name}${status.index}_orderNo').attr('disabled', 'disabled')">无</label>
			<label><input type="radio" name="${column.name}.order" value="asc" onclick="$('#${column.name}${status.index}_orderNo').removeAttr('disabled')">升序</label>
			<label><input type="radio" name="${column.name}.order" value="desc" onclick="$('#${column.name}${status.index}_orderNo').removeAttr('disabled')">降序</label>
			
		</td>
		<td class="tborder center">
			第<input style="width:30px" id="${column.name}${status.index}_orderNo" name="${column.name}.orderNo" type="number" disabled value="1" step="1" min="1">主序
		</td>
		<td class="tborder center">
<%-- <c:if test="${!column.id}"> --%>		
			<label><input type="radio" id="${column.name}${status.index}_editable1" name="${column.name}.editable" value="true" checked onclick="ddl2PageEditable('${column.name}', ${status.index}, true)">可编辑</label>
			<label><input type="radio" id="${column.name}${status.index}_editable2" name="${column.name}.editable" value="false" onclick="ddl2PageEditable('${column.name}', ${status.index}, false)">不可编辑</label>
<%-- </c:if> --%>			
		</td>
		<td class="tborder center">
<%-- <c:if test="${!column.id}"> --%>	
	<c:choose>
		<c:when test="${column.category == 'Date'}">
			<select style="width:80px" id="${column.name}${status.index}_category" name="${column.name}.category" onchange="ddl2PageCategoryParam('${column.name}', this.options[this.selectedIndex].value, ${status.index});">
				<option value="Date">日期型</option>
				<option value="DateTime" selected>日期时间</option>
				<option value="Timestamp">更新时间戳</option>
				<option value="CTimestamp">创建时间戳</option>
			</select>
		</c:when>
		<c:when test="${column.category == 'Number'}">
			<select style="width:80px" id="${column.name}${status.index}_category" name="${column.name}.category" onchange="ddl2PageCategoryParam('${column.name}', this.options[this.selectedIndex].value, ${status.index});">
				<option value="Number" selected>整型</option>
				<option value="Mobile">手机号</option>
				<option value="Zip">邮政编码</option>
				<option value="String">字符型</option>
			</select>
		</c:when>
		<c:when test="${column.category == 'Decimal'}">
			<select style="width:80px" id="${column.name}${status.index}_category" name="${column.name}.category" onchange="ddl2PageCategoryParam('${column.name}', this.options[this.selectedIndex].value, ${status.index});">
				<option value="Decimal" selected>浮点型</option>
				<option value="String">字符型</option>
			</select>
		</c:when>
		<c:otherwise>
			<select style="width:80px" id="${column.name}${status.index}_category" name="${column.name}.category" onchange="ddl2PageCategoryParam('${column.name}', this.options[this.selectedIndex].value, ${status.index});">
				<option value="Number">整型</option>
				<option value="Decimal">浮点型</option>
				<option value="String" selected>字符型</option>
				<option value="Email">电子邮箱</option>
				<option value="Mobile">手机号</option>
				<option value="Zip">邮政编码</option>
				<!-- <option value="Image">图片</option> -->
				<!-- <option value="File">附件</option> -->
				<option value="Editor">更新者</option>
				<option value="Creator">创建者</option>
				<option value="Gender">性别</option>
				<option value="Status">状态</option>
				<option value="Comment">备注</option>
			</select>
		</c:otherwise>
	</c:choose>
<%-- </c:if> --%>
		</td>
		<td id="ddl2page_input_control${status.index}" class="tborder left">
		</td>
	</tr>
</c:forEach>
</table>
<br/>
<h3>请选择功能按钮</h3>
<table class="noborder">
<!-- 	<tr>
		<td><label><input type="checkbox" name="add" checked>添加</label></td>
		<td><label><input type="checkbox" name="update" checked>编辑</label></td>
		<td><label><input type="checkbox" name="clone" checked>复制</label></td>
		<td><label><input type="checkbox" name="delete" checked>删除</label></td>
		<td><label><input type="checkbox" name="export" checked onclick="ddl2PageFormat(this)">导出</label></td>
		<td><label><input type="checkbox" name="import" checked onclick="ddl2PageFormat(this)">导入</label></td>
	</tr> -->
	<tr>
		<td colspan="6">查询条件每行列数<input style="width:30px" type="number" name="maxColumn" value="3" min="3"></td>
	</tr>
	<tr>
		<td colspan="6"><label><input type="checkbox" name="overrided" onclick="ddl2PageDomainInput();">重写数据处理默认方法</label></td>
	</tr>
	<tr>
		<td colspan="6">域对象所在模块名称<input type="text" name="module" placeholder="common" value="common" disabled></td>
	</tr>
</table>
<!-- 标签<input id="ddl2page_tag" type="text"/> -->
<input id="ddl2page_ddl" name="ddl" type="hidden">
</form>

<div id="ddl2page_controlbox" style="display:none">
	<div category="Number">
		最小值<input style="width:12%" type="number" name=".min" step="1">&nbsp;
		最大值<input style="width:52%" type="number" name=".max" step="1">
	</div>	
	<div category="Decimal">
		最小值<input style="width:12%" type="number" name=".min" step="1">&nbsp;
		最大值<input style="width:26%" type="number" name=".max" step="1">&nbsp;
		精度<input style="width:12%" type="number" name=".precision" min="0" step="1">
	</div>
	<div category="String">
		值列表<input style="width:80%" type="text" name=".list" placeholder="空格分隔值对">
	</div>
	<div category="Gender">
		值列表<input style="width:80%" type="text" name=".list" value="女:F 男:M" placeholder="空格分隔值对">
	</div>
	<div category="Status">
		值列表<input style="width:80%" type="text" name=".list" value="禁用:N 启用:Y" placeholder="空格分隔值对">
	</div>
</div>

</div>
